import React from "react";
import { Button, Space } from 'antd'
import useStore from '../../../store/appStore'
import { APP_STATUS, } from '../../../common/constant'
import './index.less'

const PanelHeader: React.FC = () => {

    const status = useStore(state => state.status)
    const startRecording = useStore(state => state.startRecording)
    const stopRecording = useStore(state => state.stopRecording)
    const startPlaying = useStore(state => state.startPlaying)
    const stopPlaying = useStore(state => state.stopPlaying)

    const src = useStore(state => state.editor.editing.meta.src)
    const commands = useStore(state => state.editor.editing.commands)

    // 播放当前宏
    const playCurrentMacro = (isStep: boolean) => {
        startPlaying(isStep)
    }

    // 播放当前行
    const playCurrentLine = () => {
        startPlaying()
    }

    return (
        <div className="panel-header">
            <div className="panel-header-left">
                <Button
                    disabled={status !== APP_STATUS.NORMAL && status !== APP_STATUS.RECORDING}
                    type={status === APP_STATUS.RECORDING ? "primary" : "default"}
                    danger={status === APP_STATUS.RECORDING}
                    onClick={() => {
                        if (status === APP_STATUS.RECORDING) {
                            stopRecording()
                        } else {
                            startRecording()
                        }
                    }}
                    className="record-button"
                >
                    {status === APP_STATUS.RECORDING ? '停止录制' : '开始录制'}
                </Button>
            </div>
            <div className="panel-header-right">
                <Space>
                    <Button
                        disabled={status !== APP_STATUS.NORMAL && status !== APP_STATUS.PLAYER}
                        type={"default"}
                        onClick={() => playCurrentMacro(true)}
                        className="play-button"
                    >
                        单步执行
                    </Button>
                    <Button
                        disabled={status !== APP_STATUS.NORMAL && status !== APP_STATUS.PLAYER}
                        type={status === APP_STATUS.PLAYER ? "primary" : "default"}
                        onClick={() => {
                            if (status === APP_STATUS.PLAYER) {
                                stopPlaying()
                            } else {
                                playCurrentMacro(false)
                            }
                        }}
                        danger={status === APP_STATUS.PLAYER}
                        className="play-button"
                    >
                        {status === APP_STATUS.PLAYER ? '停止' : '播放'}
                    </Button>
                </Space>
            </div>
        </div>
    )
}

export default PanelHeader
